import Vue from 'vue';
import VueRouter from 'vue-router';
import Layout from '@/layout/Layout.vue';
import componentsConfig from '@/config/components-config';

Vue.use(VueRouter);

// 生成组件路由配置
function generateComponentRoutes() {
  const routes = [];
  
  Object.entries(componentsConfig).forEach(([category, categoryConfig]) => {
    const categoryRoute = {
      path: `/components/${category}`,
      name: `components-${category}`,
      component: { render: h => h('router-view') },
      meta: {
        title: categoryConfig.title,
        icon: categoryConfig.icon
      },
      children: []
    };

    // 生成该分类下的所有组件路由
    Object.entries(categoryConfig.children).forEach(([componentName, componentConfig]) => {
      categoryRoute.children.push({
        path: componentName,
        name: `component-${componentName}`,
        // 直接使用组件配置中指定的组件
        component: componentConfig.component,
        meta: {
          title: componentConfig.title,
          description: componentConfig.description,
          componentName: componentName,
          component: componentConfig.component,
          docPath: componentConfig.docPath
        }
      });
    });

    routes.push(categoryRoute);
  });

  return routes;
}

// 主路由配置
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        name: 'home',
        component: () => import('../views/Home.vue'),
        meta: {
          title: '首页',
          icon: 'el-icon-home'
        }
      },
      {
        path: '/components',
        name: 'components',
        component: { render: h => h('router-view') },
        meta: {
          title: '组件',
          icon: 'el-icon-menu'
        },
        children: generateComponentRoutes()
      }
    ]
  }
];

const router = new VueRouter({
  routes
});

export default router;

